<template>
  <el-row class="mx__20 px-20 bg-white">
    <el-col class="current-content-style">
      <el-row class="py-20">
        <el-col>
          <div>
            <el-button type="primary" plain @click="modalVisible = true">添加客户类型</el-button>
          </div>
          <el-table
            :data="tableData"
            style="width: 100%"
            class="mt-20"
            :header-row-class-name="
              ({ row, rowIndex }) => {
                if (rowIndex === 0) return 'table-header-bg'
              }
            "
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column type="index" width="50" label="序号"> </el-table-column>
            <el-table-column prop="customerTypeName" label="客户类型" width="300"> </el-table-column>
            <el-table-column label="操作" width="150">
              <template v-slot="scope">
                <el-button
                  type="warning"
                  icon="el-icon-edit"
                  circle
                  size="mini"
                  @click="modifyCustomerTypeFn(scope.row)"
                ></el-button>
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  size="mini"
                  @click="deleteCustomerTypeFn(scope.row.customerTypeId)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row class="py-20">
        <el-col :span="24" class="text-left">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="currentChangeHandler"
            :total="total"
            :current-page="nowPage"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </el-col>
    <el-dialog title="修改客户类型" :visible.sync="modalVisible2" width="30%" :before-close="handleClose">
      <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="120px">
        <el-form-item label="客户类型名称" prop="customerTypeName">
          <el-input v-model="ruleForm2.customerTypeName"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="modalVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="updateCustomerTypeFn('ruleForm2')">修改</el-button>
      </span>
    </el-dialog>
    <el-dialog title="添加客户类型" :visible.sync="modalVisible" width="30%" :before-close="handleClose">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
        <el-form-item label="客户类型名称" prop="customerTypeName">
          <el-input v-model="ruleForm.customerTypeName"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="modalVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCustomerTypeFn('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </el-row>
</template>

<script>
import {
  getCustomerType,
  deleteCustomerType,
  addCustomerType,
  updateCustomerType,
  getCustomerTypePage
} from './../config/api'
export default {
  data() {
    return {
      pageSize: 5,
      nowPage: 1,
      total: 0,
      pageSizes: [10, 20, 30, 50],
      modalVisible: false,
      modalVisible2: false,
      ruleForm: {
        customerTypeName: ''
      },
      rules: {
        customerTypeName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
        ]
      },
      ruleForm2: {
        customerTypeName: ''
      },
      rules2: {
        customerTypeName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
        ]
      },
      tableData: []
    }
  },
  created() {
    // this.getCustomerTypeFn()
    this.getCustomerTypePageFn()
  },
  methods: {
    handleSizeChange(size) {
      this.pageSize = size
      this.getCustomerTypePageFn()
    },
    currentChangeHandler(page) {
      // console.log(page)
      this.nowPage = page
      this.getCustomerTypePageFn()
    },
    // 更新数据函数
    updateCustomerTypeFn(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          updateCustomerType(
            //   {
            //   customerTypeId: this.ruleForm2.customerTypeId,
            //   customerTypeName: this.ruleForm2.customerTypeName
            // }
            this.ruleForm2
          ).then(res => {
            if (res.code === 200) {
              this.modalVisible2 = false
              // this.getCustomerTypeFn() //添加成功后，重新获取
              this.getCustomerTypePageFn()
            } else
              this.$message({
                type: 'error',
                message: res.msg
              })
          })
        } else {
          return false
        }
      })
    },
    // 显示修改的模态框
    modifyCustomerTypeFn(row) {
      this.modalVisible2 = true
      // console.log(row)
      this.ruleForm2 = Object.assign({}, row) // 两个对象还是引用的关系
      // console.log(this.ruleForm2) //{customerTypeId: 13,customerTypeName: "手动阀手"}
      /**
       * 如果是简单的数据，可以使用浅拷贝； {a:1,b:true,c:"2342"}  , [234,2342,34,dsf]
       * Object.assign({}, 数据源对象)
       * Array.concat([],数据源数组)
       *
       * 深拷贝：  JSON.parse(JSON.stringify(对象或数字))
       */
    },
    addCustomerTypeFn(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          addCustomerType({ customerTypeName: this.ruleForm.customerTypeName }).then(res => {
            if (res.code === 200) {
              this.modalVisible = false
              this.$message({
                type: 'success',
                message: res.msg
              })
              // this.getCustomerTypeFn() //添加成功后，重新获取
              this.getCustomerTypePageFn()
            } else
              this.$message({
                type: 'error',
                message: res.msg
              })
          })
        } else {
          return false
        }
      })
    },
    deleteCustomerTypeFn(id) {
      deleteCustomerType({ customerTypeId: id })
        .then(res => {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: res.msg
            })
            // this.getCustomerTypeFn() // 删除成功后，重新获取数据
            // 判断是不是删除这一页的最后一条数据，如果是，当前页 - 1.
            if (this.tableData.length === 1) {
              this.nowPage = this.nowPage - 1
            }
            this.getCustomerTypePageFn()
          } else {
            this.$message({
              type: 'error',
              message: res.msg
            })
          }
        })
        .catch(err => {
          this.$message({
            type: 'error',
            message: err.msg
          })
        })
    },
    // 获取所有数据，不分页
    getCustomerTypeFn() {
      getCustomerType().then(res => {
        // console.log(res)
        if (res.code === 200) {
          this.tableData = res.data
          //{customerTypeId: 1，customerTypeName: "个人"}
        } else {
          this.$message({
            type: 'error',
            message: '查询失败'
          })
        }
      })
    },
    // 分页查询
    getCustomerTypePageFn() {
      getCustomerTypePage({
        pageNum: this.nowPage,
        pageSize: this.pageSize
      }).then(res => {
        if (res.code === 200) {
          this.tableData = res.data.list
          this.total = res.data.total
        } else {
          this.$message({
            type: 'error',
            message: '查询失败'
          })
        }
      })
    },

    showModify() {
      this.modalVisible = true
    },
    handleClose() {}
  }
}
</script>

<style>
.water-meter-item {
  border: 1px solid rgb(199, 197, 197);
  border-radius: 3px;
  margin: 10px;
  padding: 10px;
}
.water-meter-item > p {
  color: gray;
}
.bg-layer-top {
  background-color: rgb(209, 189, 203);
}
.bg-layer-body {
  background-color: rgb(224, 215, 215);
  border: 1px solid rgb(208, 202, 209);
}
.kf-label {
  display: inline-block;
  line-height: 40px;
  /* width: 120px;
  text-align: right; */
  margin-right: 10px;
  color: grey;
}
.table-header {
  background-color: rgb(100, 67, 100);
}
</style>
